<template>
  <div class="contain">
    <div id="app">
      <h1 ref="h1Ele">这是H1</h1>
      <div ref="ho"></div>
      <van-button color="blue" @click="changeref">改变ref元素样式-H1元素</van-button>
      <van-button color="blue" @click="getref">通过refs调用组件的方法</van-button>
      <singleButton :containList="containList" ref="btn"></singleButton>
    </div>
  </div>
</template>
<script>
import helper from "../../service/helper.js";
import parameter from "../../service/state.js";
import singleButton from "../../components/singleButton.vue";
export default {
  data() {
    return {
      containList: [
        {
          name: "组件按钮",
          path: "prepare",
        },
      ],
    };
  },
  components: {
    singleButton,
  },
  methods: {
    changeref() {
      // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
      console.log(this.$refs.h1Ele.innerText);
      this.$refs.h1Ele.style.color = "red"; // 修改html样式
    },
    getref() {
      console.log(this.$refs.btn.checked); // 获取组件数据
      console.log(this.$refs.btn.back); // 获取组件的方法
      this.$refs.btn.back("-1");// 获取组件的方法
    },
  },
  watch: {},
  mounted() {},
};
</script>
<style scoped>
</style>